<script setup>
import {
  getCourseInfoApi,
  getOrderByChapterList,
  getAllCommentByTypeApi,
  geCollectAPi,
  getstudyCourseListAPi
} from "../../http/http";
import { reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import MyDatails from "../../components/MyDatails.vue";
import QRcode from "qrcode";
// import { createApp } from "vue";
// import { Toast } from "vant";
const route = useRoute();
const id = route.query.basis_id;
// 数据集合
const data = reactive({
  // 评价参数
  value: 10,
  active: "课程详情",
  // 详情数据
  CourseInfo: [],
  // 详情
  DetalisInfo: {},
  DetalisInfos: [],
  // 课程按排数据
  OrderByChapterList: [],
  //  课程评价数据
  AllCommentByType: [],
  // 收藏状态
  CollectStatus: false,
  showShare_a: false,
  ImgUrl: "",
});
// 详情数据
getCourseInfoApi(id).then((res) => {
  data.CourseInfo = res.data;
  data.DetalisInfo = res.data.info;
  data.DetalisInfos = res.data.info.teacher;
});
// 课程按排数据
getOrderByChapterList(id).then((res) => {
  data.OrderByChapterList = res.data;
});

let obj = {
  course_id: id,
  type: 1,
};
// 课程评价
getAllCommentByTypeApi(obj).then((res) => {
  data.AllCommentByType = res.data.list;
});
const lingqu = async () => {
  let obj = {
    basis_id: id,
    type: 1,
  };
  let res = await getstudyCourseListAPi(obj);
  
}
// 点击收藏
// 点击收藏接口
const FnFnaddCollect = async () => {
  // 参数
  let obj = {
    basis_id: id,
    type: 1,
  };
  // 调用接口
  let res = await geCollectAPi(obj);
  // console.log(res.data.is_collect);
  // 判断状态
  if (res.data.is_collect == 0) {
    data.CollectStatus = false;
  }
  if (res.data.is_collect == 1) {
    data.CollectStatus = true;
  }
};
FnFnaddCollect();
// 点击事件
const addCollect = () => {
  // 添加收藏
  if (data.CollectStatus == false) {
    FnFnaddCollect();
    // 取消收藏
  } else if (data.CollectStatus == true) {
    FnFnaddCollect();
  }
};

// 点击分享
const showShare = () => {
  data.showShare_a = true;
};
// 点击关闭弹窗
const cross_del = () => {
  data.showShare_a = false;
};
// 获取当前地址
const hrefUrl = location.href;
// 生成二维码
QRcode.toDataURL(hrefUrl, (err, res) => {
  data.ImgUrl = res;
});

const {
  CourseInfo,
  DetalisInfo,
  DetalisInfos,
  active,
  OrderByChapterList,
  value,
  AllCommentByType,
  CollectStatus,
  showShare_a,
  ImgUrl,
} = toRefs(data);
</script>
<template>
  <div class="liveDetails">
    <!-- 头部组件 -->
    <MyDatails>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back" />
      </template>
      <template #text>
        <h2>课程详情</h2>
      </template>
      <template #right>
        <van-icon name="star-o" @click="addCollect" v-show="CollectStatus == false" />
        <van-icon name="star" color="#f85749" @click="addCollect" v-show="CollectStatus == true" />
      </template>
      <template #right_a>
        <van-icon name="share-o" @click="showShare" />
      </template>
    </MyDatails>
    <!-- 点击显示弹出层 -->
    <van-popup v-model:show="showShare_a" :style="{ height: '35%', width: '55%' }">
      <div class="del_cross" @click="cross_del">
        <van-icon class="cross" name="cross" size="15" />
      </div>
      <div class="twoMa" @click="cross_del">二维码</div>
      <img :src="ImgUrl" alt="" />
    </van-popup>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in CourseInfo.banner" :key="index">
        <img :src="item.banner_src" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 信息 -->
    <div class="liveDetails_info">
      <div class="liveDetails_title">
        {{  DetalisInfo.title  }}
      </div>
      <div class="course_count">
        <span>共 {{  DetalisInfo.course_count  }} 课时 | </span> 直播间
      </div>
      <i class="registered_num">
        <!----><span> 已报名{{  DetalisInfo.get_order_count  }}人</span>
      </i>
      <div class="liveDetails_img">
        <li v-for="(item, index) in DetalisInfos" :key="index">
          <img :src="item.avatar" alt="" />
          <div class="liveDetails_name">{{  item.teacher_name  }}</div>
        </li>
      </div>
    </div>
    <!-- 课前准备 -->
    <van-tabs v-model:active="active">
      <van-tab title="课程详情">
        <div class="Preparation" v-html="DetalisInfo.course_details"></div>
      </van-tab>
      <van-tab title="课程安排">
        <nav class="change_class">
          <div class="active_show">
            <!-- <img
              src=""
              alt=""
            /> -->
            <img
              src=""
              alt="" />
            <span>章节分类</span>
          </div>
          <div class="active_show">
            <img
              src=""
              alt="" /><span>时间排序</span>
          </div>
        </nav>
        <div class="Preparation_title">
          <i class=""></i>冲刺密训营&amp;百日面授集训说明会（30日直播）
        </div>
        <div class="Preparation_const" v-for="(item, index) in OrderByChapterList" :key="index">
          <p>1、[回放]{{  item.title  }}</p>
          <i>课程时长{{  item.video_length_str  }}分钟</i>
        </div>
      </van-tab>
      <van-tab title="资料下载"></van-tab>
      <van-tab title="课程评价">
        <!-- 评价 -->
        <ul class="evaluate_const">
          <li v-for="(item, index) in AllCommentByType" :key="index">
            <div class="img">
              <img :src="item.avatar" alt="" />
            </div>
            <div class="evaluate">
              <div class="user_name">{{  item.user_nickname  }}</div>
              <van-rate v-model="value" :size="15" color="#ffd21e" void-icon="star" void-color="#eee" />
              <div class="evaluate_title">{{  item.content  }}</div>
              <div class="evaluate_time">
                {{  new Date(item.created_at * 1000).toLocaleString()  }}
              </div>
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
    <div class="footer">
      <van-row>
        <van-col class="left" span="8"><span>免费</span></van-col>
        <van-col span="4" class="text">
          <p>
            <van-icon name="service-o" size="20px" />
          </p>
          <p class="p">客服</p>
        </van-col>
        <van-col span="12">
          <p class="right" @click="lingqu">免费领取</p>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.footer {
  width: 750px;
  position: fixed;
  left: 0;
  bottom: 0;
  text-align: center;
  background: white;
  line-height: 88px;

  .left {
    color: #44a426;
    font-size: 30px;
    border-right: 1px #bcbcbc solid;
  }

  .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    justify-content: space-between;
    height: 88px;
    padding: 5px 0;

    p {
      line-height: 43px;
    }

    .p {
      margin-top: -5px;
    }
  }

  .right {
    background: #f15a24;
    color: white;
    font-size: 30px;
  }
}

.liveDetails {
  background: #fafafa;
}

h2 {
  font-size: 40px;
}

::v-deep .van-popup {
  text-align: center;

  .cross {
    width: 30px;
    height: 30px;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
  }

  .twoMa {
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  img {
    margin-top: 20px;
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  width: 750px;
  height: 480px;
}

.my-swipe img {
  width: 100%;
  height: 100%;
}

.liveDetails_info {
  width: 750px;
  padding: 0 15px;
  background-color: #fff;

  .liveDetails_title {
    font-size: 30px;
    font-weight: 700;
    margin: 15px 0;
  }
}

.course_count {
  font-size: 20px;
  color: #999;
  vertical-align: baseline;
  outline: none;
}

.course_count span {
  margin-right: 10px;
  vertical-align: baseline;
  outline: none;
}

.registered_num {
  font-size: 25px;
  color: #999;
}

.liveDetails_img {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;

  li {
    display: flex;
    align-items: center;

    img {
      width: 60px;
      height: 60px;
      border-radius: 50px;
    }

    .liveDetails_name {
      font-size: 20px;
      margin-left: 10px;
    }
  }
}

// 课前准备
.van-tabs {
  margin-top: 25px;
  background: white;
}

::v-deep .Preparation {
  width: 750px;
  //   height: ;
  background: white;

  p {
    width: 750px;
    padding: 10px;

    img {
      width: 100% !important;
    }
  }
}

.change_class {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px 0;
  overflow: hidden;
  background: white;

  .active_show {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 212px;
    height: 54px;
    font-size: 20px;
    text-align: center;
    color: #999;
    align-items: center;
    border: 1px solid #d2d2d2;
    border-radius: 50px;
    margin-left: 0.26667rem;
    margin-right: 0.13333rem;
  }
}

.Preparation_title {
  font-size: 30px;
  text-align: center;
}

.Preparation_const {
  width: 600px;
  font-size: 20px;
  margin: auto;

  p {
    margin-top: 20px;
  }

  i {
    font-size: 25px;
    color: #999;
  }
}

// 评价部分
.evaluate_const {
  width: 750px;
  font-size: 30px;

  li {
    width: 750px;
    display: flex;
    margin-top: 20px;

    .img {
      width: 70px;
      height: 70px;
      margin: 0 30px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50px;
      }
    }

    .evaluate {
      .user_name {
        font-size: 20px;
      }

      .van-rate {
        margin: 8px 0;
      }

      .evaluate_title {
        color: #999;
        font-size: 20px;
      }

      .evaluate_time {
        color: #999;
        font-size: 20px;
      }
    }
  }
}

.active {
  border: 1px solid #f80;
  color: #f80;
}
</style>
